<template >
  <div id="app">
    <img src="./assets/logo.png">
       <!-- 第三步 使用组件 -->
    <!-- <Home></Home> -->
    <!-- <News></News> -->
<!-- 添加点击按钮切换路由 -->
    

     <ul>
      <li>
      <router-link to="/books">books</router-link>   
      </li>
      <li>
        <router-link to="/playing">playing</router-link>
      </li>
      <li>
        <router-link to="/list">list</router-link>
      </li>
      <li>
        <router-link to="/sports">sports</router-link>
      </li>
    </ul>

     <!-- 使用路由站位符 -->
     <router-view></router-view>

  </div>
</template>

<script>

// 第一步 引入组件
import Home from './views/home/home.vue'
import News from './views/news/news.vue'

export default {
  name: 'App',
  components: {
    // 第二步 挂载组件
        Home,
        News
  }
}
</script>

<style>
#app {

  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

ul   {
  list-style: none;
  display: flex;
  justify-content: space-around;
}
a {
  text-decoration: none;
}

.router-link-active {
  color: red;
}
</style>
